<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import DepartmentCascaderSingle from '@/components/business/department/cascader-sginle/index.vue';
  import { createLeadCore } from '@/api/crm/lead-core';
  import { LeadCoreAddCmd } from '@/types/crm/lead/lead-core';

  defineProps({
    visible: {
      type: Boolean,
      default() {
        return true;
      },
    },
  });
  const emit = defineEmits(['hidden']);
  const handleCancel = () => {
    emit('hidden', false);
  };

  const { loading, setLoading } = useLoading();

  const leadCoreAddCmd: LeadCoreAddCmd = reactive({
    scene: 'CRT_INTERNAL',
    companyId: null,
    sourceItem: 'MANUAL_PC_EMPLOYEE',
    channelId: null,
    activityId: null,
    ownerAddCmd: null,
    houseAddCmd: null,
    storeDeptId: null,
  });

  const createLead = async () => {
    if (loading.value) return;
    if (!leadCoreAddCmd.scene) {
      return;
    }
    if (!leadCoreAddCmd.sourceItem) {
      return;
    }
    if (
      !leadCoreAddCmd.ownerAddCmd ||
      !leadCoreAddCmd.ownerAddCmd.name ||
      !leadCoreAddCmd.ownerAddCmd.phone
    ) {
      return;
    }
    setLoading(true);
    try {
      await createLeadCore(leadCoreAddCmd);
    } catch (err) {
      console.error('lead-core-add-single, err:', leadCoreAddCmd, err);
    } finally {
      setLoading(false);
    }
  };
</script>

<template>
  <a-drawer
    :visible="visible"
    :width="450"
    :footer="false"
    :mask-closable="false"
    :esc-to-close="false"
    @cancel="handleCancel"
  >
    <template #title> 线索报备 </template>
    <div>
      <a-row style="width: 100%">
        <a-col :span="24">
          <a-form ref="leadCoreAddCmd" :model="leadCoreAddCmd" layout="inline">
            <a-row style="width: 100%">
              <a-col :span="24">
                <a-form-item
                  field="departmentId"
                  label="部门"
                  :rules="[{ required: true, message: '部门不能为空' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <DepartmentCascaderSingle
                    v-model:department-id="leadCoreAddCmd.storeDeptId"
                    :placeholder="`请选择待入职部门`"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row style="width: 100%" :gutter="8">
              <a-col :span="12">
                <a-button
                  type="primary"
                  html-type="primary"
                  :size="'mini'"
                  long
                  :loading="loading"
                  @click="createLead"
                >
                  报备
                </a-button>
              </a-col>
              <a-col :span="12">
                <a-tooltip :content="'继续完善线索信息'" :position="'tl'" mini>
                  <a-button :type="'outline'" :size="'mini'" long>
                    下一步
                  </a-button>
                </a-tooltip>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
    </div>
  </a-drawer>
</template>

<style scoped lang="less">
  .search-panel {
    height: 100%;
    width: 100%;
    padding: 8px;
  }
</style>
